spb/datacenterindex

1"use client";23import { AreaChart } from "@/components/ui/charts";4import { EmptyState } from "@/components/ui/states";5import { fmtCompact, fmtMw } from "@/lib/format";67/**8 * Facilities by opening year (cumulative). Known MW is charted separately (own axis) only when the9 * market publishes any MW figure — never on a dual axis.10 */11export function GrowthChart({ data }: { data: Array<{ year: number; facilities: number; knownMw: number | null }> }) {12  const pts = [...data].filter((d) => Number.isFinite(d.year)).sort((a, b) => a.year - b.year);13  if (pts.length < 2) return <EmptyState compact title="Not enough dated history" description="Growth appears once several facilities with a published opening year are indexed in this market." />;14  const hasMw = pts.some((d) => d.knownMw !== null && d.knownMw > 0);15  return (16    <div className={hasMw ? "grid gap-6 md:grid-cols-2" : undefined}>17      <div>18        <div className="label-caps mb-2">Facilities (cumulative)</div>19        <AreaChart series={[{ name: "Facilities", data: pts.map((d) => ({ x: d.year, y: d.facilities })), color: "var(--ink)" }]} height={170} format={(v) => fmtCompact(v, 0)} ariaLabel="Facilities by opening year" />20      </div>21      {hasMw && (22        <div>23          <div className="label-caps mb-2">Known MW</div>24          <AreaChart series={[{ name: "Known MW", data: pts.map((d) => ({ x: d.year, y: d.knownMw })), color: "var(--accent)" }]} height={170} format={(v) => fmtMw(v)} ariaLabel="Known operational MW by opening year" />25        </div>26      )}27    </div>28  );29}30